<template>
  <div :class="`${prefixCls}`">
    <a-input :placeholder="placeholder" v-model:value="editCronValue" :disabled="disabled">
      <template #addonAfter>
        <a class="open-btn" :disabled="disabled ? 'disabled' : null" @click="showConfigModal">
          <Icon icon="i-ant-design:setting-outlined" />
          <span>选择</span>
        </a>
      </template>
    </a-input>
    <EasyCronModal
      @register="registerModal"
      v-model:value="editCronValue"
      :exeStartTime="exeStartTime"
      :hideYear="hideYear"
      :remote="remote"
      :hideSecond="hideSecond"
    />
  </div>
</template>

<script lang="ts" setup>
  import { ref, watch } from "vue"
  import { useDesign } from "/@/hooks/web/useDesign"
  import { useModal } from "/@/components/Modal"
  import { propTypes } from "/@/utils/propTypes"
  import Icon from "/@/components/Icon/src/Icon.vue"
  import EasyCronModal from "./EasyCronModal.vue"
  import { cronEmits, cronProps } from "./easy.cron.data"

  const { prefixCls } = useDesign("easy-cron-input")
  const emit = defineEmits([...cronEmits])
  const props = defineProps({
    ...cronProps,
    placeholder: propTypes.string.def("请输入cron表达式"),
    exeStartTime: propTypes.oneOfType([propTypes.number, propTypes.string, propTypes.object]).def(0),
  })
  const [registerModal, { openModal }] = useModal()
  const editCronValue = ref(props.value)

  watch(
    () => props.value,
    (newVal) => {
      if (newVal !== editCronValue.value) {
        editCronValue.value = newVal
      }
    }
  )
  watch(editCronValue, (newVal) => {
    emit("change", newVal)
    emit("update:value", newVal)
  })

  function showConfigModal() {
    if (!props.disabled) {
      openModal()
    }
  }
</script>

<style lang="less">
  @import "easy.cron.input";
</style>
